<script lang="ts" setup>

import { nextTick, ref } from 'vue';
import i18n from '../../common/i18n/index.ts';
import { MappingItem } from '../../common/types';
import { SecsFormat } from '../../common/enums';
import helper from '../../common/helpler.ts';
import SecsFormatSelectVue from '../../components/SecsFormatSelect.vue';

const data = ref<MappingItem[]>([]);
const currentItem = ref<MappingItem | null>(null);
const defaultMappingItemSecsFormat = ref(SecsFormat.U4);
const ulItems = ref();

let lastChoosed = null as HTMLLIElement | null;
const varClick = (evt: MouseEvent, item: MappingItem) => {
    let anyTarget = evt.target as any;
    while (anyTarget.tagName != "LI") {
        anyTarget = anyTarget.parentNode;
    }
    if (lastChoosed == anyTarget) {
        return;
    }
    if (lastChoosed) {
        lastChoosed?.classList.remove("is-var-active");
    }
    anyTarget.classList.add("is-var-active");
    lastChoosed = anyTarget;
    currentItem.value = item;
}

const addItem = () => {
    data.value.push({
        desc: '',
        key: helper.getUniqueId(),
        name: 'name',
        mappings: []
    });
}

const delItem = (key: string) => {
    for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].key == key) {
            data.value.splice(i, 1);
            if (currentItem?.value?.key == key) {
                currentItem.value = null;
            }
            break;
        }
    }
}

const addMappingItem = () => {
    if (currentItem == null) {
        return;
    }
    currentItem.value?.mappings.push({
        key: helper.getUniqueId(),
        value: "",
        format: defaultMappingItemSecsFormat.value,
        desc: ""
    });
}

const delMappingItem = (index: number) => {
    if (currentItem == null) {
        return;
    }
    currentItem.value?.mappings.splice(index, 1);
}

const load = (items: MappingItem[]) => {
    data.value = items;
    nextTick(() => {
        if (ulItems.value.children.length > 0) {
            ulItems.value.children[0].click();
        }
    })
}

const getData = () => {
    return data.value;
}

defineExpose({ load, getData })

</script>
<template>
    <el-container>
        <el-aside width="180px" style="border-right:1px solid var(--color-toolbar-1) ;">
            <el-container>
                <el-header height="30px"
                    style="background-color: var(--color-toolbar-1);display: flex; justify-content: space-between;justify-items: center;align-items: center;">
                    <div>
                        <el-icon style="cursor: pointer;" @click="addItem">
                            <Plus />
                        </el-icon>
                    </div>
                </el-header>
                <el-main class="no-padding" style="overflow: hidden; height: 469px;">
                    <el-scrollbar ref="itemScrollbar">
                        <ul ref="ulItems" class="eqp-var-list">
                            <li @click="varClick($event, item)" v-for="item in data" :key="item.key">
                                <div style="display: flex;justify-content: space-between;">
                                    <span>{{ item.name }}</span>
                                    <span style="color:#888888;display: flex;">
                                        <el-icon class="eqp-var-del-icon" style="margin-left: 5px;"
                                            @click="delItem(item.key)">
                                            <CircleClose />
                                        </el-icon>
                                    </span>
                                </div>
                                <div
                                    style="color:#888888;text-wrap-mode: nowrap;text-overflow: ellipsis;overflow: hidden;">
                                    {{ item.desc }}
                                </div>
                            </li>
                        </ul>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header height="30px" class="no-padding"
                style="background-color: var(--color-toolbar-1);line-height: 30px;">
                {{ i18n.global.t("detail") }}
            </el-header>
            <el-main v-if="currentItem != null" style="padding:12px">
                <table class="app-table-1">
                    <tbody>
                        <tr>
                            <th>Name</th>
                            <td>
                                <el-input v-model="currentItem.name"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <th>Desc</th>
                            <td>
                                <el-input v-model="currentItem.desc"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div
                                    style="background-color: var(--color-toolbar-1);display: flex; justify-content: space-between;justify-items: center;align-items: center;height: 30px;padding:0px 15px 0px 15px;">
                                    <el-icon style="cursor: pointer;" @click="addMappingItem">
                                        <Plus />
                                    </el-icon>
                                    <div style="user-select: none;">
                                        <span>Default Format
                                            <SecsFormatSelectVue v-model="defaultMappingItemSecsFormat"
                                                style="width: 100px;margin-left: 3px;" filterable>
                                            </SecsFormatSelectVue>
                                        </span>
                                        <span style="margin-left: 5px;">Total: {{ currentItem.mappings.length
                                            }}</span>
                                    </div>
                                </div>
                                <div style="border:1px solid var(--el-border-color-lighter)">
                                    <el-table ref="tb1" :data="currentItem.mappings" style="width: 500px"
                                        height="340px">
                                        <el-table-column type="index" width="36px" align="right"
                                            header-align="center"></el-table-column>
                                        <el-table-column label="Value" width="100px" align="center">
                                            <template #default="scope">
                                                <el-input v-model="scope.row.value"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="Desc" align="center">
                                            <template #default="scope">
                                                <el-input v-model="scope.row.desc"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="Format" width="100px" align="center">
                                            <template #default="scope">
                                                <SecsFormatSelectVue v-model="scope.row.format" filterable>
                                                </SecsFormatSelectVue>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="Action" width="70" align="center">
                                            <template #default="{ $index }">
                                                <el-button link type="primary" size="small"
                                                    @click="delMappingItem($index)">
                                                    Delete
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-main>
        </el-container>
    </el-container>
</template>